<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        教学时段质量参数表
      </div>
      <div>
        <!-- 横轴week表头 -->
        <el-row>
          <el-col :span="24/(weekList.length+1)" class="view-header">
            <div v-show="false">###</div>
          </el-col>
          <el-col v-for="w in weekList" :key="w.wid" :span="24/(weekList.length+1)" class="view-header">
            <div>
              {{ w.name }}
            </div>
          </el-col>
        </el-row>

        <el-row v-for="(ol,oidx) in orderList" :key="ol.oid">
          <!-- 竖轴timeOrder表头 -->
          <el-col :span="24/(weekList.length+1)" class="view-header">
            <div>
              <el-tooltip class="item" effect="dark" :content="`${ol.startTime}~${ol.endTime}`" placement="bottom">
                <el-link :underline="false">{{ ol.name }}</el-link>
              </el-tooltip>
            </div>
          </el-col>
          <el-col v-for="(wl,widx) in weekList" :key="wl.wid" :span="24/(weekList.length+1)" class="view-body">
            <EditableText
              :element="ttTableData[oidx][widx]"
              type="number"
              :input-value="ttTableData[oidx][widx].quality"
              @confirm="editQuality"
            />

          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import EditableText from '@/components/EditableText'
import { getTeachTimeOverview, editQuality } from '@/api/ms/course/schedule/teachTime'

export default {
  name: 'TeachTime',
  components: {
    EditableText
  },
  data() {
    return {
      weekList: [ // 星期列表
      ],
      orderList: [ // 时段序号列表
      ],
      teachTimeList: [ // 时段信息列表
      ],
      editMode: {} // 参数编辑状态列表
    }
  },
  computed: {
    ttTableData() {
      const data = []
      this.orderList.forEach(ol => {
        const row = []
        this.weekList.forEach(wl => {
          // 查找对应的tt
          const tt = this.teachTimeList.find(tt => tt.dayOfWeek === wl.wid && tt.timeOrder === ol.oid)
          tt.inputQuality = tt.quality
          row.push(tt)
        })
        data.push(row)
      })
      return data
    }
  },
  mounted() {
    // 获取时段数据
    this.getTeachTimeData()
  },
  methods: {
    getTeachTimeData() {
      getTeachTimeOverview().then(({ data }) => {
        this.weekList = data.weekList
        this.orderList = data.orderList
        this.teachTimeList = data.teachTimeList
      }).catch(() => {})
    },
    editQuality(ele, oldVal, newVal) {
      if (oldVal === newVal) {
        return
      }
      editQuality({ id: ele.id, quality: newVal }).then(({ message }) => {
        this.$message.success(message)
        ele.quality = newVal
      }).catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">

$cell-width: 12%;
$cell-height: 100px;

.view-header {
  border: 1px solid grey;
  background-color: aliceblue;
  height: $cell-height;
  width: $cell-width;
  text-align: center;
}
.view-header div{
  margin-top: 37px;
}
.view-body{
  border: 1px solid grey;
  height: $cell-height;
  width: $cell-width;
  text-align: center;
}
.view-body div{
  margin-top: 37px;
}
</style>
